<template lang="pug">
div
  step(
    :src="order.step",
    :click="stepClick",
    :formatter="formatter",
  )
  modal(
    :class="{top: name=='scheduled'}",
    :show.sync="show",
    :approve="approve",
    :deny="deny",
    :header="true",
    :content="true",
  )
    div(slot="header")
      p.no-margin.no-padding 状态变为
      .ui.header.no-margin.no-padding {{name | orderStatus order.category}}
    div(slot="content")
      template(v-if="name === 'scheduled'")
        date-picker(
          :unix.sync="order.optometrist.scheduled_at",
          placeholder="验光时间",
        )
        br
        optometrist-select(
          :optometrist.sync="order.optometrist"
        )
        br
      template(v-if="name === 'shipping'")
        label 顺丰单号
        .ui.input
          input(v-model="order.express_number")
        br
      input(type="checkbox", v-model="order.notify")
      label.pointer(@click="order.notify=!order.notify")  发送通知
</template>

<script>
import Modal from '../../modules/semantic/modal'
import Step from '../../modules/step'
import OptometristSelect from '../../modules/select/optometrist'
import DatePicker from '../../modules/date'

export default {
  name: 'orderSteps',
  components: {
    Modal,
    Step,
    DatePicker,
    OptometristSelect,
  },
  props: ['order'],
  data () {
    return {
      show: false,
      name: null,
      originalOrder: null,
    }
  },
  methods: {
    formatter (i) {
      return this.helper.orderStatus(i.name, this.order.category)
    },
    stepClick(item) {
      this.name = item.name
      this.originalOrder = _.cloneDeep(this.order)
      this.order.notify = true
      this.show = true
    },
    deny() {
      this.order = _.cloneDeep(this.originalOrder)
    },
    approve() {
      let index = 0
      let currentIndex
      _.each(this.order.step, i=>{
        if (i.name === this.name) {
          i.at = moment().unix()
          this.order.step.$set(index, i)
          currentIndex = index
          index++
        } else {
          if (currentIndex == undefined || index < currentIndex) {
            if (!i.at) {
              i.at = moment().unix()
              this.order.step.$set(index, i)
            }
            index++
          } else if (index > currentIndex) {
            i.at = null
            this.order.step.$set(index, i)
            index++
          }
        }
      })
      this.order.status = this.name
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
